@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
*
{
 margin:0;
 padding:0;
 box-sizing: border-box;
 overflow: hidden;
}



body
{
 display:flex;
 justify-content:center ;
 align-items:center;
 min-height:100vh;
 background:rgb(6, 6, 6);
}
.loader
{
 position:relative;
 width: 300px;
 height: 300px;
 border-radius: 50%;
 background: linear-gradient(45deg,transparent,
 transparent 40%, red);
 animation: animate 5s linear infinite;
}
@keyframes animate
{
   0%
   { transform: rotate(0deg);
   /*filter:hue-rotate(0deg);*/
   }
   100%
   {
    transform: rotate(360deg);
     /*filter:hue-rotate(360deg);*/
   }
}

.loader:before
{
 content: '';
 position: absolute;
 top: 6px;
 left: 6px;
 right: 6px;
 bottom: 6px;
 background: rgb(6, 6, 6);
 border-radius:50%;
 z-index: 1000;
}
.loader:after
{
 content: '';
 position:absolute;
 top:0px;
 left:0px;
 right:0px;
 bottom:0px;
 background:linear-gradient(45deg,transparent,
 transparent 40%, red);
 border-radius:50%;
 z-index: 1000;
 z-index:1;
 filter: blur(30px);
}

#logo {
  width: 250px;
  height: 250px;
  position: absolute;
  border-radius: 60%;

}
#logo:after{
    opacity: 1;
  }


#logo:hover {
  opacity: 0.5;
}
div.checking {
  display: block;
  position: absolute;
  margin-bottom: 20px;
  bottom: 0;
  text-align: center;
  justify-content: center;
}
div.checking h1 {
  font-family: 'Poppins', sans-serif;
  color: aliceblue;

}


.scanlines {
  overflow: hidden;
  mix-blend-mode: difference;
}

.scanlines::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;

  background: repeating-linear-gradient(
    to bottom,
    transparent 0%,
    rgba(255, 255, 255, 0.05) .5%,
    transparent 1%
  );

  animation: fudge 3s ease-in-out alternate infinite;
}


@keyframes fudge {
  from {
    transform: translate(0px, 0px);
  }
  to {
    transform: translate(0px, 2%);
  }
}


#spinlogo {
  width: 250px;
  height: 250px;
  position: absolute;
  border-radius: 60%;
  animation: shadow 2s infinite;
}